<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('统计')" />
    <style>
        .ibox-title h5{
            padding: 0 !important;
        }
        .col-sm-3{
            width: 50% !important;
        }
        .panel panel-success{
            text-align: center !important;
        }
        .ownsty{
            background: #fff !important;
            color: #1223d6;
            height: 138px !important;
        }
        .ownsty>h2{
            font-size: 20px !important;
        }
        .panel-heading{
            background:  #1540b9 !important;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row" style="height: 88%;">
        <div class="col-sm-12 select-table table-bordered">
            <h1 style="text-align: center;font-weight: 900;margin-top: 2%;">
                运营近况
            </h1>
            <div class="col-sm-12" style="margin-top: 2%;">
                <div class="row ell" style="width: 50%; float: left;">
                    <div class="col-sm-3  padding first-line" >
                        <div class="panel panel-success" >
                            <div class="panel-heading" th:title="昨日营收">
                                昨日营收
                            </div>
                            <div class="ibox-content ownsty" >
                                <h2>
                                    总金额(元)：<span id="yesterdayAmount">0.00</span>
                                </h2>
                                <h2>
                                    订单总数(个)：<span id="yesterdayCount">0</span>
                                </h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3  padding first-line" >
                        <div class="panel panel-success" >
                            <div class="panel-heading" th:title="今日营收">
                                今日营收
                            </div>
                            <div class="ibox-content ownsty" >
                                <h2>
                                    总金额(元)：<span id="nowdayAmount">0.00</span>
                                </h2>
                                <h2>
                                    订单总数(个)：<span id="nowdayCount">0</span>
                                </h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3  padding first-line">
                        <div class="panel panel-success" >
                            <div class="panel-heading ell" th:title="今日设备状态">
                                今日设备状态
                            </div>
                            <div class="ibox-content ownsty"  >
                                <h2>
                                    在线设备(台)：<span id="on_line">0</span>
                                </h2>
                                <h2>
                                    离线设备(台)：<span id="off_line">0</span>
                                </h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3  padding first-line">
                        <div class="panel panel-success" >
                            <div class="panel-heading" th:title="今日新增用户">
                                今日新增用户
                            </div>
                            <div class="ibox-content ownsty" >
                                <h2>
                                    普通用户(个)：<span id="customer">0</span>
                                </h2>
                                <h2>
                                    云卡用户(个)：<span id="cloudCard">0</span>
                                </h2>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="width: 50%; float: right;" >
                    <div class="ibox float-e-margins">
                        <div class="panel-heading" style="color: #fff;" th:title="近7日订单变化">
                            近7日订单变化
                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-line-chart-7d" style="height: 300px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="row  border-bottom white-bg dashboard-header" style="margin-top: 2px;height: auto;border-radius: 6px;">
        <h1 style="text-align: center;font-weight: 900;margin-top: 1px;">
            运营总览
        </h1>
        <div class="col-sm-12" style="margin-top: 1%;">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>营收</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-gauge-chart" style="height: 450px"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>趋势</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart" style="height: 450px"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins" >
                    <div class="ibox-title">
                        <h5>占比</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-pie-chart" style="height: 360px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>对比</h5>
                    </div>
                    <div class="ibox-content">

                        <div class="echarts" id="echarts-bar-chart" style="height: 360px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12" style="margin-top: 1%;">

        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="tj-form">
                <div class="select-list">
                    <ul>
                        <li class="select-time">
                            <label>统计时间： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="st"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="et"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="searchData()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="resetData()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
            <div class="ibox float-e-margins" style="margin-top: 66px;height: 158px !important">
                <div class="ibox-title">
                    <h5>汇总 <small class="m-l-sm">统计</small></h5>
                </div>
                <div class="ibox-content" >
                    <h2>
                        总金额(元)：<span id="allAmount">0.00</span>
                    </h2>
                    <h2>
                        订单总数(个)：<span id="allCount">0</span>
                    </h2>
                </div>
            </div>
            <table id="bootstrap-table" data-page-size="10"
                   data-show-custom-view="true" data-custom-view="customViewFormatter"
                   data-show-custom-view-button="true">
            </table>
        </div>
    </div>
</div>

<template id="profileTemplate">
    <div class="col-sm-6" >
        <div class="contact-box">
            <a onclick="orderList('%jumpDeviceCode%','%jumpDeviceName%')">
                <div class="col-sm-8">
                    <h3><i class="fa fa-tv"></i> <strong>设备编号： %deviceCode%</strong></h3>
                    <p><i class="fa fa-home"></i><strong> 设备名称： </strong>%deviceName%</p>
                    <p><i class="fa fa-jpy"></i><strong> 订单金额(元)： </strong>%amount%</p>
                    <p><i class="fa fa-asterisk"></i><strong> 订单数(个)： </strong>%count%</p>
                </div>
                <div class="clearfix"></div>
            </a>
        </div>
    </div>
</template>
<input th:type="hidden" id="ptOrder" th:value="0">
<input th:type="hidden" id="allOrder" th:value="0">
<input th:type="hidden" id="cloudOrder" th:value="0">


<input th:type="hidden" id="oldSt" >
<input th:type="hidden" id="oldEt" >


<div th:include="include :: footer"></div>
<th:block th:include="include :: bootstrap-table-export-js" />
<th:block th:include="include :: bootstrap-table-custom-view-js" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
    var prefix = ctx + "biz/tj";
    $(function() {
        loadAll();
        //营收
        revenue('first');
        // pieChart();
        //趋势
        trend();
        //近七日订单
        near7Days();
        //近两日营收
        near2Days();
        //今日新增用户数
        nowdayNewAddUser();
        //今日设备在线情况
        nowdayDeviceOnLine();
        // barChart();
        var adminFlag = [[${@permission.hasPermi('biz:manage:admin')}]];
        console.log("adminFlag=",adminFlag)
        if(adminFlag == 'hidden'){
            $("#pidDiv").hide();
        }
        //是否显示分页
        var pagination = true;
        var options = {
            url: prefix + "/list",
            showSearch: true,
            showRefresh: true,
            showToggle: false,
            showColumns: false,
            showExport: false,
            pagination: pagination,
            columns: [{
                checkbox: true
                },
                {
                    field : 'id',
                    title : '设备ID',
                    visible: false
                },
                {
                    field : 'deviceCode',
                    title : '设备编号22'
                },
                {
                    field : 'name',
                    title : '设备名称'
                },
                {
                    field : 'amount',
                    title : '订单金额(元)'
                },
                {
                    field : 'count',
                    title : '订单数(个)'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="orderList(\'' + row.deviceCode + '\',\'' + row.name + '\')"><i class="fa fa-info"></i> 统计详情</a> ');
                        return actions.join('');
                }
            }]
        };
        $.table.init(options);
    });

    function getName(row){
        var name = row.name;
        if(null == name || name ==''){
            name = row.deviceCode;
        }
        return name;
    }
    function searchData(){
        $.table.search();
        loadAll();
    }
    function resetData(){
        $.form.reset()
        loadAll();
    }
    function customViewFormatter (data) {
        var template = $('#profileTemplate').html()
        var view = ''
        $.each(data, function (i, row) {
            view += template.replace('%jumpDeviceCode%', row.deviceCode)
                .replace('%jumpDeviceName%', row.name)
                .replace('%deviceCode%', row.deviceCode)
                .replace('%deviceName%', row.name)
                .replace('%amount%', row.amount)
                .replace('%count%', row.count);
        })

        return `<div class="row mx-0">${view}</div>`
    }

    /**
     * 设备订单
     * @param id
     */
    function orderList(sn,name){
        var url = prefix + '/order?sn=' + sn;
        var title = name;
        if(null == title || title == ''){
            title = sn;
        }
        $.modal.openTab("设备["+title+"]订单列表", url);
    }

    /**
     * 汇总
     */
    function loadAll(){
        var dataParam = $.common.formToJSON('tj-form');
        console.log("dataParam: ",dataParam)
        $.post(prefix + '/all',dataParam,function (res){
            if(res.code == 0){
                $("#allAmount").text(res.data.amount);
                $("#allCount").text(res.data.count);
            }
        })
    }


    /**
     * 营收
     */
    function revenue(loadFlag){
        var dataParam = {};
        $.post(prefix + '/revenue',dataParam,function (res){
            if(res.code == 0){
                var data = res.data;
                console.log(data)
                $("#allOrder").val(data.amount);
                $("#ptOrder").val(data.ptOrder);
                $("#cloudOrder").val(data.cloudOrder);
                if(loadFlag == 'first'){
                    gaugeChart(data.amountMax,data.ptOrderMax,data.cloudOrderMax);
                }
                //饼图
                var pieTitle = ['小程序机订单','大屏机订单'];
                pieChart(pieTitle,data.ptOrder,data.cloudOrder);
            }
        })
    }
    /**
     * 趋势统计
     */
    function trend(){
        var dataParam = {};
        $.post(prefix + '/trend',dataParam,function (res){
            if(res.code == 0){
                var data = res.data;
                lineChart(data.months,data.ptOrder,data.cloudOrder);
                //柱状图
                barChart(data.months.splice(6,11),data.ptOrder.splice(6,11),data.cloudOrder.splice(6,11));
            }
        })
    }
    /**
     * 近7日订单
     */
    function near7Days(){
        var dataParam = {};
        $.post(prefix + '/near7Days',dataParam,function (res){
            if(res.code == 0){
                var data = res.data;
                lineChart7d(data.days,data.ptOrder,data.cloudOrder);
            }
        })
    }

    /**
     * 近2日营收
     */
    function near2Days(){
        var dataParam = {};
        $.post(prefix + '/near2Days',dataParam,function (res){
            if(res.code == 0){
                var data = res.data;
                var nowDayData = data.nowday;
                //处理今日营收
                $("#nowdayAmount").text(nowDayData.amount);
                $("#nowdayCount").text(nowDayData.count);
                //处理昨日营收
                var yesterdayData = data.yesterday;
                //处理今日营收
                $("#yesterdayAmount").text(yesterdayData.amount);
                $("#yesterdayCount").text(yesterdayData.count);
            }
        })
    }
    /**
     * 今日新增用户数
     */
    function nowdayNewAddUser(){
        var dataParam = {};
        $.post(prefix + '/nowdayNewAddUser',dataParam,function (res){
            if(res.code == 0){
                var data = res.data;
                $("#cloudCard").text(data.cloudCard);
                $("#customer").text(data.customer);
            }
        })
    }
    /**
     * 今日设备在线情况
     */
    function nowdayDeviceOnLine(){
        var dataParam = {};
        $.post(prefix + '/nowdayDeviceOnLine',dataParam,function (res){
            if(res.code == 0){
                var data = res.data;
                $("#on_line").text(data.on_line);
                $("#off_line").text(data.off_line);
            }
        })
    }
    /**
     * 仪表盘
     */
    function gaugeChart(amountMax,ptOrderMax,cloudOrderMax){
        //仪表盘
        var gaugeChart = echarts.init(document.getElementById("echarts-gauge-chart"));
        var gaugeoption = {
            tooltip: {
                formatter: "{a} <br/>{c} {b}"
            },
            toolbox: {
                show: true,
                feature: {
                    restore: {show: false},
                    saveAsImage: {show: true}
                }
            },
            series : [
                {
                    name: '总计(元)',
                    type: 'gauge',
                    z: 3,
                    min: 0,
                    max: amountMax,
                    splitNumber: 10,
                    radius: '95%',
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 15,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 20,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    axisLabel: {
                        backgroundColor: 'auto',
                        borderRadius: 2,
                        color: '#eee',
                        padding: 3,
                        textShadowBlur: 2,
                        textShadowOffsetX: 1,
                        textShadowOffsetY: 1,
                        textShadowColor: '#222'
                    },
                    title: {
                        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
                        fontStyle: 'italic'
                    },
                    detail: {
                        fontWeight: 'bolder',
                        borderRadius: 3,
                        backgroundColor: '#444',
                        borderColor: '#aaa',
                        shadowBlur: 5,
                        shadowColor: '#333',
                        shadowOffsetX: 0,
                        shadowOffsetY: 3,
                        borderWidth: 2,
                        textBorderColor: '#000',
                        textBorderWidth: 2,
                        textShadowBlur: 2,
                        textShadowColor: '#fff',
                        textShadowOffsetX: 0,
                        textShadowOffsetY: 0,
                        fontFamily: 'Arial',
                        width: 170,
                        color: '#eee',
                        rich: {}
                    },
                    data: [{value: 0, name: '总订单额(元)'}]
                },
                {
                    name: '总计(元)',
                    type: 'gauge',
                    center: ['20%', '55%'],    // 默认全局居中
                    radius: '85%',
                    min: 0,
                    max: ptOrderMax,
                    endAngle: 45,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 8
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 20,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    pointer: {
                        width: 5
                    },
                    title: {
                        offsetCenter: [0, '-30%']       // x, y，单位px
                    },
                    detail: {
                        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder'
                    },
                    data: [{value: 0, name: '小程序机订单额(元)'}]
                },
                {
                    name: '总计(元)',
                    type: 'gauge',
                    center: ['86%', '55%'],    // 默认全局居中
                    radius: '83%',
                    min: 0,
                    max: cloudOrderMax,
                    endAngle: 45,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 8
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 20,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    pointer: {
                        width: 5
                    },
                    title: {
                        offsetCenter: [0, '-30%']       // x, y，单位px
                    },
                    detail: {
                        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder'
                    },
                    data: [{value: 0, name: '大屏机订单额(元)'}]
                }
            ]
        };

        gaugeChart.setOption(gaugeoption);
        $(window).resize(gaugeChart.resize);
        setInterval(function (){
            var ptOrder = $("#ptOrder").val();
            var allOrder = $("#allOrder").val();
            var cloudOrder = $("#cloudOrder").val();
            console.log("=====",ptOrder,allOrder,cloudOrder)
            gaugeoption.series[0].data[0].value = allOrder;
            gaugeoption.series[1].data[0].value = ptOrder;
            gaugeoption.series[2].data[0].value = cloudOrder;
            gaugeChart.setOption(gaugeoption,true);
        },1500);
    }

    /**
     * 饼图
     */
    function pieChart(pieTitle,ptOrder,cloudOrder){
        var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
        var pieoption = {
            title : {
                text: '订单类型占比',
                subtext: '订单额(元)',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:pieTitle
            },
            calculable : true,
            series : [
                {
                    name:'订单类型',
                    type:'pie',
                    radius : '65%',
                    // color:['#3457b6','#b4476d'],
                    center: ['50%', '60%'],
                    data:[
                        {value:ptOrder, name:'小程序机订单'},
                        {value:cloudOrder, name:'大屏机订单'},
                    ]
                }
            ]
        };
        pieChart.setOption(pieoption);
        $(window).resize(pieChart.resize);

    }

    /**
     * 折线图
     */
    function lineChart(months,ptOrder,cloudOrder){
        var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
        var lineoption = {
            title : {
                text: '近一年趋势变化',
                subtext: '订单额(元)',
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['小程序机订单','大屏机订单']
            },
            grid:{
                x:60,
                x2:60,
                y2:20
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : months
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        formatter: '{value} 元'
                    }
                }
            ],
            series : [
                {
                    name:'小程序机订单',
                    type:'line',
                    data:ptOrder,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'大屏机订单',
                    type:'line',
                    data:cloudOrder,
                    markPoint : {
                        data : [
                            {name : '最低', value : -2, xAxis: 1, yAxis: -1.5}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }
            ]
        };
        lineChart.setOption(lineoption);
        $(window).resize(lineChart.resize);
    }

    /**
     * 折线图
     */
    function lineChart7d(days,ptOrder,cloudOrder){
        var lineChart7d = echarts.init(document.getElementById("echarts-line-chart-7d"));
        var lineoption = {
            title : {
                text: '近7日订单变化',
                subtext: '订单额(元)',
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['小程序机订单','大屏机订单']
            },
            grid:{
                x:60,
                x2:60,
                y2:20
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : days
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        formatter: '{value} 元'
                    }
                }
            ],
            series : [
                {
                    name:'小程序机订单',
                    type:'line',
                    data:ptOrder,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'大屏机订单',
                    type:'line',
                    data:cloudOrder,
                    markPoint : {
                        data : [
                            {name : '最低', value : -2, xAxis: 1, yAxis: -1.5}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }
            ]
        };
        lineChart7d.setOption(lineoption);
        $(window).resize(lineChart7d.resize);
    }
    /**
     * 柱状图
     */
    function barChart(category,ptOrder,cloudOrder){
        var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
        var baroption = {
            title : {
                text: '近6个月订单额对比',
                subtext: '订单额(元)',
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['小程序机订单','大屏机订单']
            },
            grid:{
                x:40,
                x2:50,
                y2:24
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : category
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'小程序机订单',
                    type:'bar',
                    data:ptOrder,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'大屏机订单',
                    type:'bar',
                    data:cloudOrder,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                        // data : [
                        //     {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                        //     {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                        // ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }
            ]
        };
        barChart.setOption(baroption);
        window.onresize = barChart.resize;
    }
</script>
</body>
</html>